<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>知识库管理-新增原子</title>
    <link rel="stylesheet" href="../../../../plugins/layui/css/layui.css">
    <!--拖拽样式-->
    <link rel="stylesheet" href="../../../../plugins/jquery/jquery-ui.min.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/styleReset.css">

    <link rel="stylesheet" href="../../css/knowHouseMana.css">
</head>
<body class="konwledge-add-body">
<div class="knowHouse-addYuanzi-detail">
    <!-- 内容主体区域 -->
    <div class="content-box">
        <!--塞内容位置-->

        <!--内容部分 start-->
        <div class="content-right-part">
            <div class="card card-content">
                <form class="form-horizontal madal-body-height">
                    <div class="form-group">
                        <label for="tempInput1" class="col-xs-2 control-label">模板名称:</label>
                        <div class="col-xs-9">
                            <input type="text" class="form-control" id="tempInput1" placeholder="" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="knowleHouseInput" class="col-xs-2 control-label">所属知识库:</label>
                        <div class="col-xs-9">
                            <select name="" id="knowleHouseInput" class="form-control">
                                <option value="">请选择</option>
                                <option value="1">知识库1</option>
                                <option value="2">知识库2</option>
                                <option value="3">知识库3</option>
                                <option value="4">知识库4</option>
                                <option value="5">知识库5</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group relative-know">
                        <label for="tempInput2" class="col-xs-2 control-label">模板原子:</label>
                        <div class="col-xs-9">
                            <input type="text" class="form-control" id="tempInput2" value="">
                            <button class="btn btn-primary pull-right " id="addYuanzi">
                                <img src="../../image/upload.png" alt="">
                            </button>
                        </div>
                    </div>
                    <div class="yuanziName-content form-group">
                        <ul class="col-xs-offset-2 col-xs-9" id="knowHouse-items">
                            <li>
                                <span class="num">1.</span>
                                <span class="itemName">
                                    <input type="text" data-before="原子名称1" class="text-input" readonly  onchange="saveInput(this)" value="原子名称1">
                                </span>
                                <div class="pull-right edit-box">
                                    <button type="button" class="btn btn-link bianji-btn"><span class="iconfont icon-bianji"></span></button>
                                    <button type="button" class="btn btn-link dele-btn"><span class="iconfont icon-off dele-about"></span></button>
                                </div>
                            </li>
                            <li>
                                <span class="num">2.</span>
                                <span class="itemName">
                                    <input type="text" data-before="原子名称2" class="text-input" readonly  onchange="saveInput(this)" value="原子名称1">
                                </span>
                                <div class="pull-right edit-box">
                                    <button type="button" class="btn btn-link bianji-btn"><span class="iconfont icon-bianji"></span></button>
                                    <button type="button" class="btn btn-link dele-btn"><span class="iconfont icon-off dele-about"></span></button>
                                </div>
                            </li>
                            <li>
                                <span class="num">3.</span>
                                <span class="itemName">
                                    <input type="text" data-before="原子名称3" class="text-input" readonly  onchange="saveInput(this)" value="原子名称3">
                                </span>
                                <div class="pull-right edit-box">
                                    <button type="button" class="btn btn-link bianji-btn"><span class="iconfont icon-bianji"></span></button>
                                    <button type="button" class="btn btn-link dele-btn"><span class="iconfont icon-off dele-about"></span></button>
                                </div>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </form>
                <div class="clearfix"></div>
                <div class="save-btn-content mt30">
                    <button type="button" class="btn btn-primary save-btn">保存</button>
                    <button type="button" class="btn btn-default cancel-btn">取消</button>
                </div>
            </div>
        </div>
        <!--内容部分 end-->

    </div>
</div>

<script src="../../../../plugins/jquery/jquery-1.12.4.js"></script>
<script src="../../../../plugins/bootstrap.js"></script>
<script src="../../../../plugins/layui/layui.js"></script>
<script src="../../../../plugins/My97DatePicker/WdatePicker.js"></script>

<script>
    layui.use(['tree', 'layer', 'laypage', 'element'], function () {
        var layer = layui.layer
            , element = layui.element
            , laypage = layui.laypage
            , $ = layui.jquery;
        // 添加原子
        $(document).on("click","#addYuanzi",function(event){
            event.preventDefault();
            var yuanziName = $("#tempInput2").val();
            if(yuanziName){
                var tempHtm = ' <li>\n' +
                    '    <span class="num">1.</span>\n' +
                    '    <span class="itemName">\n' +
                    '        <input type="text" data-before="'+yuanziName+'" class="text-input" readonly  onchange="saveInput(this)" value="'+yuanziName+'">\n' +
                    '    </span>\n' +
                    '    <div class="pull-right edit-box">\n' +
                    '        <button type="button" class="btn btn-link bianji-btn"><span class="iconfont icon-bianji"></span></button>\n' +
                    '        <button type="button" class="btn btn-link dele-btn"><span class="iconfont icon-off dele-about"></span></button>\n' +
                    '    </div>\n' +
                    '</li>';
                $("#knowHouse-items").append(tempHtm);
                yuanziSort();
            }else{
                layer.msg("请输入原子名称");
            }
        })
        // 删除原子
        $(document).on("click",".dele-about",function(){
            $(this).parents("li").remove();
            yuanziSort();

        })
        // 编辑原子
        $(document).on("click",".bianji-btn",function(){
            $(this).parents("li").find("input").removeAttr("readonly");
            $(this).parents("li").addClass("edit");
        })
        // 保存按钮
        $(document).on("click",".save-btn",function(){
            var tempName = $("#tempInput1").val();
            var knowHouse = $("#knowleHouseInput option:selected").val();
            var yuanziList = $("#knowHouse-items").find("li");
            var yuanziListArr = [];
            if(!tempName){
                layer.msg("请输入模板名称");
                return ;
            }
            if(!knowHouse){
                layer.msg("请选择所属知识库");
                return ;
            }
            if(yuanziList.length<1){
                layer.msg("请添加模板原子");
                return ;
            }else{
                for(var i = 0;i<yuanziList.length;i++){
                    if($(yuanziList[i]).hasClass("edit")){
                        layer.msg("请保存变更的原子名称");
                        return ;
                    }
                    yuanziListArr.push($(yuanziList[i]).find(".text-input").val())
                }
            }
            var submitData = {
                tempName:tempName,
                knowHouse:knowHouse,
                yuanziListArr:yuanziListArr
            }
            layer.alert(JSON.stringify(submitData))
        })

    });
    // 输入框离开保存名字
    function saveInput(el){
        $(el).prop("readonly",true);
        $(el).data("before",$(el).val())
    }
    // 原子重新排序
    function yuanziSort(){
        $("#knowHouse-items").find("li").each(function(){
            $(this).find(".num").html(($(this).index()+1)+".")
        })
    }
</script>
</body>
</html>
